<template>
  <div class="header-bar">
    <van-icon name="arrow-left" size="20" @click="$emit('back')" class="back-btn" />
    <span class="title">{{ title }}</span>
    <van-icon v-if="rightIcon" :name="rightIcon" size="20" @click="$emit('right')" class="right-btn" />
  </div>
</template>
<script setup>
const props = defineProps({
  title: String,
  rightIcon: String
})
</script>
<style scoped>
.header-bar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  color: #222;
  font-size: 18px;
  font-weight: 500;
  background: transparent;
  position: relative;
  z-index: 10;
}
.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #222;
}
.back-btn, .right-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style> 